<template>
  <el-table :data="data" v-bind="$attrs" style="width: 100%">
    <template v-for="column in columns" :key="column.prop">
      <!-- 默认渲染列 (START) -->
      <el-table-column
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
      >
        <template #default="scope">
          <template v-if="!column.render">
            <span>{{ scope.row[column.prop] }}</span>
          </template>
          <template v-else>
            <EExpand
              :column="column"
              :row="scope.row"
              :render="column.render"
              :index="scope.$index"
            />
          </template>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import EExpand from './Expand'

defineProps({
  columns: { type: Array, default: () => [] },
  data: { type: Array, default: () => [] }
})
</script>

<style scoped></style>
